<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/static/WebTours/images/hp-blue-favicon.png" rel="icon" type="image/png" sizes="32x32">
  <title>Web Tours - Find Flight</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f4f8;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #003366;
      color: white;
      padding: 10px;
      display: flex;
      align-items: center;
    }

    header img {
      margin-right: 10px;
      height: 30px;
    }

    .container {
      display: flex;
      margin: 20px auto;
    }

    .menu {
      width: 150px;
      padding: 20px;
      border-right: 1px solid #ccc;
    }

    .menu a {
      padding: 5px 20px;
      margin: 5px;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      color: white;
      background: linear-gradient(45deg, #bdc3c7, #2c3e50);
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
      transition: all .2s ease-in-out;
      border: 1px solid #000;
      display: block;
    }

    .menu a:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 8px rgba(0, 0, 0, .2);
    }

    .content {
      flex: 1;
      padding: 20px;
    }

    .content>h2 {
      color: #003366;
    }

    .form-group {
      margin-bottom: 10px;
    }

    .flight-table {
      width: 100%;
      border-collapse: collapse;
    }

    .flight-table th,
    .flight-table td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    .flight-table th {
      background-color: #003087;
      color: white;
    }

    .form-group label {
      display: inline-block;
      width: 150px;
    }

    .form-group input[type="checkbox"] {
      margin-right: 5px;
    }

    .form-group input[type="radio"] {
      margin-right: 5px;
    }

    .form-group .checkbox-group {
      display: inline-block;
    }

    .form-group .checkbox-group label {
      display: inline-block;
    }

    .form-group .radio-group {
      display: inline-block;
    }

    .form-group .radio-group label {
      display: inline-block;
    }

    .form-group .checkbox-group {
      display: inline-block;
    }

    .form-group .checkbox-group label {
      display: inline-block;
    }

    .submit-button {
      display: block;
      margin: 20px auto;
      padding: 5px 10px;
      /*padding: 10px 20px;*/
      background-color: #003366;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <header>
    <img src="/static/WebTours/images/hp_logo.png" alt="HP Logo">
    <span>Web Tours</span>
  </header>

  <div class="container">
    <div class="menu">
      <a href="/flight">Flights</a>
      <a href="/itinerary">Itinerary</a>
      <a href="/home">Home</a>
      <a href="/signoff">Sign Off</a>
    </div>

    <div class="content" th:if="${step == 1}">
      <h2>Find Flight</h2>
      <form method="post" action="/cgi-bin/step1/reservations.pl">
        <div class="form-group">
          <label for="departureCity">Departure City:</label>
          <select id="departureCity" name="depart">
            <option selected="selected" value="Denver">Denver</option>
            <option value="Frankfurt">Frankfurt</option>
            <option value="London">London</option>
            <option value="Los Angeles">Los Angeles</option>
            <option value="Paris">Paris</option>
            <option value="Portland">Portland</option>
            <option value="San Francisco">San Francisco</option>
            <option value="Seattle">Seattle</option>
            <option value="Sydney">Sydney</option>
            <option value="Zurich">Zurich</option>
            <!-- Add more options as needed -->
          </select>
          <label for="departDate">Departure Date:</label>
          <input id="departDate" max="2025-06-30T23:59" min="2025-06-01T00:00" name="departDate"
            type="datetime-local" value="2025-06-15T14:00">
        </div>
        <div class="form-group">
          <label for="arrivalCity">Arrival City:</label>
          <select id="arrivalCity" name="arrive">
            <option selected="selected" value="Denver">Denver</option>
            <option value="Frankfurt">Frankfurt</option>
            <option value="London">London</option>
            <option value="Los Angeles">Los Angeles</option>
            <option value="Paris">Paris</option>
            <option value="Portland">Portland</option>
            <option value="San Francisco">San Francisco</option>
            <option value="Seattle">Seattle</option>
            <option value="Sydney">Sydney</option>
            <option value="Zurich">Zurich</option>
            <!-- Add more options as needed -->
          </select>
          <label for="returnDate">Return Date:</label>
          <input id="returnDate" max="2025-06-30T23:59" min="2025-06-01T00:00" name="returnDate" type="datetime-local"
            value="2025-06-15T14:00">
        </div>
        <div class="form-group">
          <label for="advanceDiscount">Discount:</label>
          <input type="number" id="advanceDiscount" name="advanceDiscount" value="0">
        </div>
        <div class="form-group">
          <label for="numPassengers">No. of Passengers:</label>
          <input type="number" id="numPassengers" name="numPassengers" value="1">
          <label for="roundTrip"><input type="checkbox" id="roundTrip" name="roundTrip"> Roundtrip ticket</label>
        </div>
        <div class="form-group">
          <label>Seating Preference:</label>
          <div class="radio-group">
            <input type="radio" id="aisle" name="seatPref" value="Aisle">
            <label for="aisle">Aisle</label>
            <input type="radio" id="window" name="seatPref" value="Window">
            <label for="window">Window</label>
            <input type="radio" id="none" name="seatPref" value="None" checked>
            <label for="none">None</label>
          </div>
        </div>
        <div class="form-group">
          <label>Type of Seat:</label>
          <div class="radio-group">
            <input type="radio" id="first" name="seatType" value="First">
            <label for="first">First</label>
            <input type="radio" id="business" name="seatType" value="Business">
            <label for="business">Business</label>
            <input type="radio" id="coach" name="seatType" value="Coach" checked>
            <label for="coach">Coach</label>
          </div>
        </div>
        <input type="hidden" name=".cgifields" value="roundtrip" />
        <input type="hidden" name=".cgifields" value="seatType" />
        <input type="hidden" name=".cgifields" value="seatPref" />
        <button type="submit" class="submit-button">Continue...</button>
      </form>
    </div>
    <div class="content" th:if="${step == 2}">
      <h1>Find Flight</h1>
      <p style="text-align: center;">Flight departing from Denver to Denver on 06/03/2025</p>
      <form method="post" action="/cgi-bin/step2/reservations.pl">
        <table class="flight-table">
          <tr>
            <th>Flight</th>
            <th>Departure time</th>
            <th>Cost</th>
          </tr>
          <tr>
            <td><input name="flight" type="radio" checked /> Blue Sky Air 000</td>
            <td>8am</td>
            <td>$ 0</td>
          </tr>
          <tr>
            <td><input name="flight" type="radio" /> Blue Sky Air 001</td>
            <td>1pm</td>
            <td>$ 0</td>
          </tr>
          <tr>
            <td><input name="flight" type="radio" /> Blue Sky Air 002</td>
            <td>5pm</td>
            <td>$ 0</td>
          </tr>
          <tr>
            <td><input name="flight" type="radio" /> Blue Sky Air 003</td>
            <td>11pm</td>
            <td>$ 0</td>
          </tr>
        </table>
        <div class="form-group" style="text-align: center;">
          <button type="submit" class="submit-button">Continue...</button>
        </div>
      </form>
    </div>
    <div class="content" th:if="${step == 3}">
      <h1>Payment Details</h1>
      <form method="post" action="/cgi-bin/step3/reservations.pl">
        <input type="hidden" name="JSFormSubmit" value="off">
        <input type="hidden" name="oldCCOption" value="">
        <input type="hidden" name="seatType" value="Coach">
        <input type="hidden" name="seatPref" value="None">
        <input type="hidden" name="outboundFlight" value="000;0;06/10/2025">
        <input type="hidden" name="returnFlight" value="">
        <input type="number" name="advanceDiscount" value="0">
        <input type="number" name="numPassengers" value="1">
        <div class="form-group">
          <label for="firstName">First Name:</label>
          <input id="firstName" name="firstName" type="text" value="Jojo">
        </div>
        <div class="form-group">
          <label for="lastName">Last Name:</label>
          <input id="lastName" name="lastName" type="text" value="Bean">
        </div>
        <div class="form-group">
          <label for="streetAddress">Street Address:</label>
          <input id="streetAddress" name="address1" type="text">
        </div>
        <div class="form-group">
          <label for="cityStateZip">City/State/Zip:</label>
          <input id="cityStateZip" name="address2" type="text">
        </div>
        <div class="form-group">
          <label for="passengerNames">Passenger Names:</label>
          <input id="passengerNames" name="pass1" type="text" value="Jojo Bean">
        </div>
        <div class="total">
          Total for 1 ticket(s) is = $ 0
        </div>
        <div class="form-group">
          <label for="creditCard">Credit Card:</label>
          <input id="creditCard" name="creditCard" type="text">
          <label for="expDate">Exp Date:</label>
          <input id="expDate" name="expDate" type="text">
        </div>
        <div class="form-group">
          <input id="saveCardInfo" type="checkbox">
          <label for="saveCardInfo">Save this Credit Card Information</label>
        </div>
        <div style="text-align: right;">
          <button type="submit" class="submit-button">Continue...</button>
        </div>
      </form>
    </div>
  </div>

  <script th:inline="javascript">
    /*<![CDATA[*/
    document.getElementsByClassName('submit-button')[0].addEventListener('submit', function (e) {
      e.preventDefault();
      // window.location.href = "/flight?step=" + /*[(${nextUrl})]*/ '/flight';
      console.log(/*[(${'\"' + nextUrl+ '\"'})]*/);
      console.log(e);
    });
    /*]]>*/
  </script>
</body>

</html>